<!DOCTYPE html>
<html ng-app="scotchApp">

	<head>
		<!-- SCROLLS -->
		<!-- load bootstrap and fontawesome via CDN -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

		<!-- SPELLS -->
		<!-- load angular via CDN -->
		<script src="../angular.js"></script>
		<!--
        	作者：3105334046@qq.com
        	时间：2016-12-23
        	描述：引入路由的库
        -->
		<script src="../angular-route.js"></script>
	</head>

	<body ng-controller="mainController">
		<!-- HEADER AND NAVBAR -->
		<header>
			<nav class="navbar navbar-default">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" href="/">Angular Routing Example</a>
					</div>

					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#"><i class="fa fa-home"></i> Home</a>
						</li>
						<li>
							<a href="#about"><i class="fa fa-shield"></i> About</a>
						</li>
						<li>
							<a href="#contact"><i class="fa fa-comment"></i> Contact</a>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<div id="main">
			{{message}}
			<!-- angular templating -->
			<!-- this is where content will be injected -->
			<div ng-view></div>
		</div>
		<script>
			var scotchApp = angular.module("scotchApp", []);
			scotchApp.controller("mainController", function($scope) {
				// create a message to display in our view
				$scope.message = 'Everyone come and see how good I look!';
			});
		</script>
	</body>

</html>